// 社会招聘
import React, { useState } from 'react'
import '../css/LH.css'
import { Pagination } from 'antd';
import Footer from '../component/Footer.jsx'
import Store from '../store/index'

export default function Shzp() {
    const [data,setData] = useState(Store.getState)

    Store.subscribe(()=>{
        setData(Store.getState())
    })
    return (
        <div>
            <div className="recruitBanner___hORju">
                <img src={require("../img/LH/10.jpg").default} alt=""/>
            </div>
            <div className="layout___3LH4T">
                <div className="main___3sNTd">
                    <div className="rocket-row">
                        <div className="rocket-col">
                            <span className="rocket-input-group-wrapper">
                                <span className="rocket-input-group">
                                    <input type="text" placeholder="搜索职位名称" />
                                    <span className="rocket-input-group-addon">
                                        <button className="rocket-btn">
                                            <span className="m-h-10">搜 索</span>
                                        </button>
                                    </span>
                                </span>
                            </span>
                            <div className="recruit-search-keywords">
                                热门搜索:
                                <a className="recruit-search-keyword">JAVA</a>
                                <a className="recruit-search-keyword">算法</a>
                                <a className="recruit-search-keyword">数据</a>
                                <a className="recruit-search-keyword">前端</a>
                                <a className="recruit-search-keyword">产品经理</a>
                                <a className="recruit-search-keyword">运营</a>
                                <a className="recruit-search-keyword">交互</a>
                                <a className="recruit-search-keyword">服务专家</a>
                            </div>
                        </div>
                    </div>
                </div>
                {/* content */}
                <div className="rocket-row">
                    <div className="kuan">
                        <div className="rocket-col rocket-col-6">
                            <div className="rocket-card" style={{marginTop: '0'}}>
                                <div className='rocket-card-body'>
                                    <div className="font-20 font-w-8 filter-title font-dark-gray">职位类别</div>
                                    <div className="filter-divider"></div>
                                    <div className="rocket-row">
                                        {
                                            data.list4.map((item,index)=>{
                                                return <div key={index} className="rocket-col rocket-col-12 pos-col">
                                                        <span className="ctz-tag">
                                                            <div className="tag-text font-16">{item}</div>
                                                        </span>
                                                    </div>
                                            })
                                        }
                                        
                                    </div>
                                </div>
                                {/* 热招岗位 */}
                                <div className="rocket-card">
                                    <div className='rocket-card-body card'>
                                        <div className="font-20 font-w-8 filter-title font-dark-gray">职位类别</div>
                                        <div className="filter-divider"></div>
                                        <div className="rocket-row">
                                            {
                                                data.list5.map((item,index)=>{
                                                    return <div key={index} className="rocket">
                                                            <span className="ss">
                                                                <a href="" className="">{item}</a>
                                                            </span>
                                                        </div>
                                                })
                                            }
                                            
                                        </div>
                                    </div>
                                </div>

                                {/* 招聘小程序 */}
                                <div className="rocket-card">
                                    <div className='rocket-card-body cardd'>
                                        <div className="font-20 font-w-8 filter-title font-dark-gray">招聘小程序</div>
                                        <div className="filter-divider"></div>
                                        <div className="rocket-row row">
                                            <img className="qrcodeimg" src={require("../img/LH/2.jpg").default} alt=""/>
                                        </div>
                                        <div className="filter-divider"></div>
                                        <p>关注拼多多招聘</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="rocket-col rocket-col-18">
                            <div className="rocket-spin-nested-loading">
                                <div className="rocket-card">
                                    <div className="rocket-card-bodyy">
                                        <div className="rocket-roww">
                                            <div className="rocket-col rocket-col-12">
                                                <p>最新发布</p>
                                            </div>
                                            <div className="rocket-col rocket-col-12">
                                                <p style={{textAlign: "right"}}>显示1-10,共36个职位</p>
                                            </div>
                                        </div>


                                    {
                                        data.list6.map((item,index)=>{
                                            return (
                                                <div className="rocket-row mm" key={index}>
                                                    <div className="rocket-col rocket-col-24">
                                                        <div className="rocket-card m-t-10">
                                                            <div className="rockee">
                                                                <div>
                                                                    <a className="recruit-link">
                                                                        <h1>{item}</h1>
                                                                    </a>
                                                                    <a className="detail-link">详情</a>
                                                                </div>
                                                                <div className="m-t-12">
                                                                    <span className="detail">
                                                                        <img src={require("../img/LH/1.svg").default} alt="技术类"/>
                                                                        <span className="detail-pos-text">技术类</span>
                                                                    </span>
                                                                    <span className="desc-split"></span>
                                                                </div>
                                                                <div className="m-t-12">
                                                                    <span className="detail">
                                                                        <img src={require("../img/LH/3.svg").default} alt="技术类"/>
                                                                        <span className="detail-pos-text">上海</span>
                                                                    </span>
                                                                    <span className="desc-split"></span>
                                                                </div>
                                                                <div className="m-t-12">
                                                                    <span className="detail">
                                                                        <img src={require("../img/LH/3.svg").default} alt="技术类"/>
                                                                        <span className="detail-pos-text">若干</span>
                                                                    </span>
                                                                    <span className="desc-split"></span>
                                                                </div>
                                                                <div className="m-t-12">
                                                                    <span className="detail">
                                                                        <img src={require("../img/LH/4.svg").default} alt="技术类"/>
                                                                        <span className="detail-pos-text">2020-11-04</span>
                                                                    </span>
                                                                    <span className="desc-split"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                    </div>
                                        
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <Footer />
        </div>
    )
}
